<template>
	<div class="serverList">
		<div class="serverItems" v-for="(item,index) in showList" :key="index" @click='classEvent(item)'>
			<div class="serverItemsLeft">
				<image :src="item.num == 2?list.img1:list.img" mode=""></image>
			</div>
			<div class="serverItemsRight">
				<div class="serverItemsRight_top">
					{{item.num == 2?list.name1:list.name }}
					<div class="serverItemsRight_top_time">
						{{item.time}}
					</div>
				</div>
				<div class="serverItemsRight_bottom">
					专业服务
				</div>

			</div>
			<div class="serverItemsBtn">
				预约
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			list: [String, Number, Array],
			tabIndex: [String, Number, Array],
		},
		data() {
			return {
				showList: []
			}
		},
		watch: {
			list(newVal, oldVal) {
				this.showList = newVal.time || []
			}
		},
		mounted() {
			this.showList = this.list.time || []
			console.log('showListshowListshowList', this.showList)
		},
		methods: {
			classEvent(ite) {
				const params = {
					time: ite.time,
					name: ite.num == 2 ? ite.name1 : ite.name,
					tabIndex: this.tabIndex,
					num:ite.num
				}

				console.log('13213', params)
				uni.navigateTo({
					url: '/pages/server/upDataServe?ite=' + JSON.stringify(params)
				})
			}

		}
	}
</script>

<style lang="less">
	.serverList {
		padding: 0 28rpx;
		box-sizing: border-box;

		.serverItems {
			width: 100%;
			height: 244rpx;
			border-bottom: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;

			.serverItemsBtn {
				width: 126rpx;
				height: 54rpx;
				border-radius: 27rpx;
				border: 2rpx solid #2E61FF;
				font-size: 28rpx;
				color: #2E61FF;
				text-align: center;
				line-height: 54rpx;
				top: 42rpx;
				right: 0;
				position: absolute;
			}
		}

		.serverItems:last-child {
			border: none
		}

		.serverItemsLeft {
			width: 238rpx;
			height: 172rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.serverItemsRight {
			margin-left: 22rpx;

			.serverItemsRight_top {
				font-size: 36rpx;
				font-weight: bold;

				.serverItemsRight_top_time {
					font-size: 28rpx;
					color: #666666;
					margin-top: 2rpx;
					font-weight: 400;
				}

			}

			.serverItemsRight_bottom {
				margin-top: 32rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}
</style>